import { Component } from 'react';

import { Boxs } from 'saltui';
const { HBox, Box } = Boxs;


export default class Page extends Component {

  constructor(props) {
    super(props);
    this.state = {
        data: [],
        value: null,
        readOnly: false,
        required:false
    }
  }

  componentWillMount(){
      let t = this;
      let data = [];
      let value = null;
      if(t.props.data && t.props.data.length > 0) data = t.props.data;
      if(t.props.value) value = t.props.value;
      t.setState({
        data: data,
        value: value
      })
  }
 
  handleShow(index){
    let t = this;
    let data = t.state.data;
    let value = {};
    for(let i = 0; i < data.length; i++){
        if(i == index){
            data[i].checked = true;
            value = data[i];
        }else{
            data[i].checked = false;
        }
    }
    this.setState({
        data: data,
        value: value
    });
    this.props.onChange(value);
  }

  render() {
    let t = this;
    let data = t.state.data;
    let value = t.state.value;
    return (
        <div>
            <HBox>
            {
                data.map(function(item,i){
                    return(
                        <HBox vAlign="top" className="t-FS14 t-FC3 t-PR20">
                            <Box onClick={t.handleShow.bind(this,i)}>
                            <div className={(value ? (value.text == item.text ? true : false) : item.checked) ? 't-checkbox-field-icon-list t-MT2':'t-checkbox-field-icon-list un-checked t-MT2'}  >
                                <i className="iconfont icon-checked t-FCf t-FS14"></i>
                            </div>
                            </Box> 
                            <Box className="t-PL10 t-PB10 t-FS16"><span>{item.text}</span></Box>
                        </HBox>
                    )
                }.bind(this))
            }
            </HBox>
        </div>
        
    );
  }
}



